<template>
  <div class="search">
    <div class="item">
      <span>服务名称：</span>
      <el-select v-model="searchCondition.serviceId" placeholder="请选择" size="small">
        <el-option value='' label="全部"></el-option>
          <el-option
            v-for="(item,index) in serverList"
            :key="index"
            :label="item.name"
            :value="item.id + ''"
            ></el-option>
      </el-select>
    </div>

    <div class="item">
      <span>是否存活：</span>
      <el-select v-model="searchCondition.active" placeholder="请选择" size="small">
        <el-option label="全部" value=""></el-option>
        <el-option
          v-for="item in resultoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>

    <div class="item">
      <span>开始时间：</span>
    <el-date-picker
      v-model="searchCondition.time"
      type="daterange"
      value-format="yyyy-MM-dd"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    </div>
    <div class="item">
      <span>问题描述：</span>
      <el-input v-model="searchCondition.description" placeholder="请输入问题描述"></el-input>
    </div>

    <div class="item btnArea">
      <el-button @click="reset" size="small">重置</el-button>
      <el-button type="primary" size="small" @click="doSearch">查询</el-button>
      
    </div>
  </div>
</template>

<script>
import {serviceData} from '@/api/log';
export default {
  components: {},
  data() {
    return {
      resultoptions: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "0",
          label: "否",
        },
      ],
      searchCondition: {
        startTime:'',
        endTime:'',
        serviceId:"",
        active: "",
        description: "",
        time: [],
        pageNo:1,
        pageSize:20,
      },
      serverList:[],
    };
  },
  methods: {
    doSearch(){
      this.searchCondition.startTime = this.searchCondition.time[0];
      this.searchCondition.endTime = this.searchCondition.time[1];
      this.$emit('doQuery',this.searchCondition)
    },
    reset() {
      Object.keys(this.searchCondition).slice(0, -3).forEach(
        (key) => (this.searchCondition[key] = "")
      );
      this.searchCondition.time = [];
      // this.$message({
      //   message: "已重置",
      //   type: "success",
      // });
      this.searchCondition.pageNo = 1;
      this.$emit('doQuery',this.searchCondition);
    },
    getDataList(){
      serviceData().then(res=>{
        if(res.success){
          this.serverList = res.result;
        }
      })
    },
  },
  created() {
    this.getDataList();
  },
};
</script>
<style lang="scss" scoped>
.search {
  padding: 20px;
  padding-left: 0;
  display: flex;
  align-items: flex-end;
  .item {
    margin-right: 30px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0,0,0,0.85);
  }
  .btnArea {
    display: flex;
  }
  ::v-deep .el-date-editor .el-range__icon{
    line-height: 26px;
  }
  ::v-deep .el-date-editor .el-range__close-icon{
    line-height: 26px;
  }
  ::v-deep .el-date-editor .el-range-separator{
    width: 7%;
  }
  ::v-deep .el-date-editor .el-range-separator{
    line-height: 26px;
  }
  ::v-deep .el-input__inner{
      height: 32px;
      line-height: 32px;
      font-size: 14px;
    }
  .el-input {
    width: 200px;
  
  }
  .el-button--primary{
    background-color: #3C77FF;
    border-color: #3C77FF;
  }
  .el-button--text{
    color: #3C77FF;
  }
  .el-button:focus, .el-button:hover {
    background: #FFF;
    border-color: #3C77FF;
    color: #3C77FF;
  }
 
}
</style>
